$(function () {
    // console.log(renzheArr)

    //头部广告
    $('.adv_img').mouseenter(function () {
        $('.adv_big').show()
    })
    $('.adv_big').mouseleave(function () {
        $('.adv_big').hide()
    })

    //忍者列表初始化
    nowHero()

    //换页点击
    $('.prev_page a').click(function () { //向上翻页
        rzObj.page--
        showRz(rzObj.page)
    })
    $('.next_page a').click(function () { //向下翻页
        rzObj.page++
        showRz(rzObj.page)
    })

    //搜索栏
    $('.search i').click(function () { //单击
        nowHero($('.search input').val().trim())
    })
    $('.search input').keyup(function (e) { //回车
        if (e.keyCode == 13) {
            $('.search i').click()
        }
    })

    //筛选栏的点击
    /* 
        每个li里的选项都是单选，排他且排自己
    */
    for (let i = 0; i < $('.tab_list li').length; i++) { //遍历li
        $('.tab_list li').eq(i).find('p').click(function () {
            //每个li里的p都添加点击事件
            $(this).toggleClass('active').siblings('p').removeClass('active')
            rzObj.page = 1
            setTz(this)
        })
    }
    //清空筛选
    $('.clear_choose').click(function () {
        // window.location.reload() //先用刷新来代替
        $('p').removeClass('active')
        $('.search input').val('')
        tz = {
            sex: undefined,
            level: undefined,
            rz_trait: undefined,
            rz_skill: undefined,
        }
        nowHero()
    })

})

//创建一个存放筛选特征的对象，每次点击都会改变这个对象，并且进行一次筛选判断
let tz = { //undefined为全选
    sex: undefined,
    level: undefined,
    rz_trait: undefined,
    rz_skill: undefined,
}

let rzObj = {
    page: 1,
    hero_list: {
        data: []
    },
    rz_name: undefined
}

function searchName(str) {
    rzObj.hero_list.data = [] //清空对象数组
    for (let i = 0; i < renzheArr.length; i++) { //初始化
        rzObj.hero_list.data.push(renzheArr[i])
    }
    /* 
        输入框内容与每个对象的名字进行indexOf判断，有就显示
    */
    if (str) { //非空
        for (let i = 0; i < rzObj.hero_list.data.length; i++) {

            if (rzObj.hero_list.data[i]['rzmc_39'].indexOf(str) == -1) {
                rzObj.hero_list.data.splice(i, 1) //删除该项
                i-- //删除后i后退1
            }
        }
    }

}

function setTz(ele) {
    //获取该p所在的li中h3的类名
    let hClass = $(ele).parent('li').children('h3').attr('class')
    //将对应的特征存入对象
    tz[hClass] = undefined //先初始化
    if ($(ele).hasClass('active')) { //判断是否为选中状态
        tz[hClass] = $(ele).children('span').attr('tz')
    }
    //调用函数
    nowHero()
}



function nowHero(searchStr) { //根据筛选特征对象显示

    searchName(searchStr)

    for (let key in tz) {
        let rz_w = '' //设置一个用来对比的属性名
        switch (key) {
            case 'sex': //性别
                rz_w = 'xb_96'
                break;
            case 'level': //等级
                rz_w = 'rzdj_a8'
                break;
            case 'rz_trait': //特点
                rz_w = 'jsbq_0a'
                break;
            case 'rz_skill': //技能
                rz_w = 'jntd_1851'
                break;
        }
        for (let i = 0; i < rzObj.hero_list.data.length; i++) {
            if (rzObj.hero_list.data[i][rz_w].indexOf(tz[key]) == -1 && tz[key]) {
                //判断为不在该筛选范围，并且该项不是全选
                rzObj.hero_list.data.splice(i, 1) //删除该项
                i-- //删除后i后退1
            }
        }
    }
    console.log(rzObj.hero_list)
    showRz(rzObj.page)
}

//显示数据及页码
function showRz(page) {
    let start = (page - 1) * 40
    let end = page * 40
    let show = {}
    show.data = rzObj.hero_list.data.slice(start, end)
    //每页显示40个数据
    let html = template('rz_list', show)
    $(html).appendTo($('.hero_list').empty())

    //刷新页码
    let pages = Math.ceil(rzObj.hero_list.data.length / 40)
    $('.paging_box span').text(`${page} / ${pages}`)
    //显示或隐藏页码的按钮
    if (page == 1 && pages != 1) { //首页
        $('.prev_page a').hide()
        $('.next_page a').show()
    } else if (page == pages && pages != 1) { //尾页
        $('.prev_page a').show()
        $('.next_page a').hide()
    } else if (pages == 1) {
        $('.prev_page a').hide()
        $('.next_page a').hide()
    } else {
        $('.prev_page a').show()
        $('.next_page a').show()
    }
}